<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1400px" :close-on-click-modal="false"
    :before-close="handleClose">
    <!-- 物料采购查询栏-------------------------------------------------------------------------------- -->
    <div class="search_continer">
      <div class="search_continer_title">查询栏</div>
      <div class="search_continer_myInput">
        <el-input v-model="queryParams.materialNum" placeholder="请输入物料编号" />
      </div>
      <div class="search_continer_myInput">
        <el-input v-model="queryParams.materialName" placeholder="请输入物料名称" />
      </div>
      <div class="search_continer_myInput">
        <el-select v-model="queryParams.kind" placeholder="请选择分类">
          <el-option v-for="(v, k) in ['耗材', '备件']" :key="k" :label="v" :value="k" />
        </el-select>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="handleQueryClick">查询</el-button>
      <el-button icon="el-icon-refresh-left" @click="handleReset">重置</el-button>
    </div>
    <!-- 提交按钮---------------------------------------------------------------------------------------- -->
    <div class="operation_continer">
      <div class="operation_continer_title">操作栏</div>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleSubmit">提交</el-button>
    </div>
    <!-- 物料采购表格列表------------------------------------------------------------------------------------------ -->
    <div class="form_table">
      <el-table :data="ruleFormList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <div> {{ scope.$index + 1 }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="materialNum" label="物料编号" width="160" />
        <el-table-column prop="materialName" label="名称" show-overflow-tooltip />
        <el-table-column prop="typeName" label="类别" />
        <el-table-column label="规格型号" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div> {{ row.model || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商" show-overflow-tooltip />
        <el-table-column prop="unitName" label="单位" />
        <el-table-column prop="amount" label="物料类型" show-overflow-tooltip>
          <template slot-scope="{row}">
            <dict-tags :options="SparePartsAndConsumables" :value="row.kind" />
          </template>
        </el-table-column>
        <el-table-column prop="price" label="采购单价（元）" v-if="spareType == 0" />
        <el-table-column prop="overplusAmount" label="剩余入库数量" v-if="spareType == 0" />
        <el-table-column v-if="spareType == 1" label="库存均价（元）">
          <template slot-scope="{row}">
            <div> {{ row.price || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column label="备注" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div> {{ row.remark || '-' }} </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- --------------------------------分页器---------------------------------------------------------- -->
    <div class="table_continer_pagination">
      <el-pagination :current-page="pageParams.pageNum" background :page-sizes="[10, 20, 50, 100]"
        :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-dialog>
</template>

<script>
/** 远程添加，修改，获取单个详性接口，获取selector下拉列表的接口，以及时间转换工具函数等 ------------------------------------------------- */
import { getuserlist } from '@/api/deviceConsumable/stock'
import { pageCount } from '@/utils/pagination'
/** ------------------------------------------------------------------------------------------------------------------------------- */
function processQueryParams (queryParams, pageParams, id, type) {
  if (type) {
    // 非采购
    const ids = {
      storehouseId: id
    }
    const params = Object.assign({}, queryParams, pageParams, ids)
    return params
  } else {
    // 采购
    const ids = {
      purchaseId: id
    }
    const params = Object.assign({}, queryParams, pageParams, ids)
    return params
  }
}
export default {
  name: 'Form',
  data () {
    return {
      dialogVisible: false,
      dialogTitle: '添加物料',
      spareType: '',// 0：采购列表   1：非采购列表
      spareId: '',
      ruleFormList: [], // 表格展示列表
      selectionList: [],// 勾选后的列表
      /** 查询参数 --------------------------------------------------------------------------------- */
      queryParams: {
        materialNum: null,
        materialName: null,
        kind: null
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        /** 列表默认排序字段 ---------------------------------------------------------------------------------------------------------- */
        orderByColumn: 'consumableBaseId',
        /** ------------------------------------------------------------------------------------------------------------------------- */
        isAsc: 'desc'
      },
      pagination: {
        total: 1,
        pageCount: 1
      },
    }
  },
  methods: {
    // 打开表单对话框
    openDialog (id, type) {
      this.spareType = type
      this.spareId = id
      this.refreshList(id, type)
      this.dialogVisible = true
    },
    // 多选事件------------------------------------
    handleSelectionChange (val) {
      console.log(val);
      this.selectionList = val
    },
    // 接口事件-----------------------------------------
    refreshList (id, type) {
      const params = processQueryParams(this.queryParams, this.pageParams, id, type)
      console.log('查询参数', params);
      getuserlist(params).then((res) => {
        this.pagination.total = res.total
        this.pagination.pageCount = pageCount(this.pagination.total, this.pageParams.pageSize)
        this.ruleFormList = res.data
      })
    },
    // 查询事件-----------------------------------------------------
    handleQueryClick () {
      this.refreshList(this.spareId, this.spareType)
    },
    // 重置事件----------------------------------------------------
    handleReset () {
      for (const key in this.queryParams) {
        this.queryParams[key] = ''
      }
      this.pageParams.pageNum = 1
      this.refreshList(this.spareId, this.spareType)
    },
    // 分页器事件-----------------------------
    handleSizeChange (value) {
      this.pageParams.pageSize = value
      this.refreshList(this.spareId, this.spareType)
    },
    handleCurrentChange (value) {
      this.pageParams.pageNum = value
      this.refreshList(this.spareId, this.spareType)
    },
    // 提交事件-----------------------------------------------------------------
    handleSubmit () {
      if (this.selectionList.length) {
        this.$emit('click_create_submit', this.selectionList)
        this.dialogVisible = false
        this.pageParams.pageNum = 1
      } else {
        this.$message({
          message: '请勾选物料！',
          type: 'warning'
        });
      }

    },
    /** ---------------------------------------------------------------------------------------------------------------------------------------- */
    // 关闭窗口，重置搜索框
    handleClose () {
      this.ruleFormList = []
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
// 查询栏
.search_continer {
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  background-color: white;
  border-radius: 5px;

  &_title {
    line-height: 36px;
    padding: 0 20px 0 0;
    font-weight: bold;
  }

  &_myInput {
    padding-right: 20px;
  }
}

// 提交按钮
.operation_continer {
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  background-color: white;
  border-radius: 5px;

  &_title {
    line-height: 36px;
    padding: 0 20px 0 0;
    font-weight: bold;
  }
}

// 分页器
.table_continer_pagination {
  margin-bottom: 30px;
}
</style>
